<template>
	<div class="buy-car-page">
		<van-nav-bar
		  title="购物车"
			left-text="返回"
			 @click-left="handleLeftClick"
		/>
		<van-tabs v-model="isDeal">
		  <van-tab title="未结算" name="0"></van-tab>
		  <van-tab title="已结算" name="1"></van-tab>
		  
		</van-tabs>
		<van-card
			v-for="(item,index) in list"
			:key="item.goodsId"
		  :price="item.goodsPrice*item.goodsDiscount/10"
		  :desc="item.goodsDescription"
		  :title="item.goodsName"
		  :thumb="item.goodsLogo"
		  :origin-price="item.goodsPrice"
			@click="handleGoodsInfo(item)"
		>
			<template v-slot:num>库存:{{item.goodsCount}}</template>
			<template v-slot:thumb>
				<div class="logo">
					<van-checkbox 
						v-if="isDeal==0"
						shape="square"
						class="checkbox"
						v-model="list[index].checked" 
						@click="handleChecked($event,item,index)"></van-checkbox>
					<img 
						class="img"
						:src="item.goodsLogo" alt="">
				</div>
				
			</template>
			<template v-slot:bottom>
				<div class="num">
					
						购买数量：
						<van-button 
							v-if="isDeal==0"
							class="btns" 
							size="mini" 
							@click="handlePlus(item,index)">+</van-button>
						{{item.buyCount}}
						<van-button 
							v-if="isDeal==0"
							class="btns" 
							size="mini" 
							@click="handleSub(item,index)">-</van-button>
							
				</div>
				<div class="preview">
					<van-button type="info" @click="handlePreview(item)" size="mini">查看商品</van-button>
					<van-button type="danger" size="mini" @click="handleDelete(item)">删除</van-button>
					<van-button 
						v-if="isDeal == 1"
						size="mini" type="warning" @click="handlePreviewOrder(item)" >查看订单</van-button>
				</div>
			</template>
		</van-card>
		<van-submit-bar 
			v-if="isDeal==0"
			:price="getTotalPrice" button-text="提交订单" @submit="onSubmit" >
			<van-checkbox  v-model="allChecked">全选</van-checkbox>
		</van-submit-bar>
	</div>
</template>

<script>
	import {getBuyCarList,deleteBuyCarById} from '@/api/buy-car-api.js'
	export default{
		data(){
			return {
				list:[],
				userInfo:{},
				isDeal:0,
				allChecked:false,
				totalPrice:0
			}
		},
		computed:{
			getTotalPrice(){
				if(this.list.length == 0){
					return 0
				}
				let totalPrice = this.list.reduce((last,item,index,list) => {
					
					if(index == 1){
						let lastPrice
						if(last.checked == false){
							lastPrice = 0 
						}else{
							lastPrice = (last.goodsPrice*last.goodsDiscount/10)*last.buyCount
						}
						let thisPrice
						if(item.checked == false){
							thisPrice = 0
						}else{
							thisPrice = (item.goodsPrice*item.goodsDiscount/10)*item.buyCount
						}
						return lastPrice+thisPrice
					}else{
						let thisPrice 
						if(item.checked == false){
							thisPrice = last+0
						}else{
							thisPrice = last+(item.goodsPrice*item.goodsDiscount/10)*item.buyCount
						}
						return thisPrice
					}
					
					
				})
				
				if(typeof totalPrice != 'number'){
					if(totalPrice.checked){
						totalPrice = totalPrice.goodsPrice*totalPrice.goodsDiscount/10*totalPrice.buyCount
					}else{
						totalPrice = 0
					}
				}
				return totalPrice*100
			}
		},
		async created() {
			this.userInfo = JSON.parse(sessionStorage.userInfo)
			await this.getBuyCarList()
		},
		watch:{
			isDeal(v){
				this.getBuyCarList()
			},
			allChecked(v){
				this.list = this.list.map(item => {
					item.checked = v
					return item
				})
			}
		},
		methods:{
			async  getBuyCarList(){
				let res = await getBuyCarList({id:this.userInfo.id,isDeal:this.isDeal})
				if(res.data.code == 200){
					this.list = res.data.data.list.map(item => {
						return {
							...item,
							checked:false
						}
					})
				}
			},
			handleLeftClick(){
				this.$router.history.go(-1)
			},
			handleGoodsInfo(item){
				// this.$router.push({path:'/shop-info',query:{id:item.goodsId}})
			},
			handleChecked(e,item,index){
				
			},
			handlePreview(item){
				this.$router.push({path:'/shop-info',query:{id:item.goodsId}})
			},
			async handleDelete(item){
				let r = await this.$dialog.confirm({
					title:'提示',
					message:'正在从购物车删除，点击确认继续'
				}).catch(err => err)
				if(r == 'confirm'){
					let res = await deleteBuyCarById(item.id)
					if(res.data.code == 200){
						this.$notify({type:'success',message:res.data.msg})
					}
					await this.getBuyCarList()
				}
			},
			handlePlus(item,index){
				item.buyCount = item.buyCount+1
				if(item.buyCount>=item.goodsCount){
					item.buyCount = item.goodsCount
				}
				this.$set(this.list,index,item)
			},
			handleSub(item,index){
				item.buyCount = item.buyCount-1
				if(item.buyCount <=1){
					item.buyCount = 1
				}
				this.$set(this.list,index,item)
			},
			onSubmit(){
				let formList = this.list.filter(item => {
					return item.checked
				})
				if(formList.length>0){
					
					this.$router.push({
						name:'shop-order-buy-car',
						params:{
							formList
						}
					})
				}else{
					this.$notify({type:'danger',message:'您还没选择商品结算'})
				}
			},
			handlePreviewOrder(item){
				console.log(item)
				this.$router.push({path:'/order-info',query:{orderNo:item.orderNo}})
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.buy-car-page{
		padding-bottom: 50px;
		::v-deep .check-box{
			.van-checkbox{
				justify-content: flex-end;
			}
			
		}
		.preview{
			text-align: right;
		}
		::v-deep  .van-card__thumb{
			width: auto;
			.logo{
				width: 100%;
				display: flex;
				.checkbox{
					margin-right: 10px;
				}
				.img{
					width: 88px;
					height: 88px;
				}
			}
		}
		.num{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-weight: bold;
			.btns{
				line-height: 12px;
				height: 14px;
			}
		}
	}
	
</style>
